<template>
	<view>
		<comHeader :config="navConfig"/>
		<view class="order-info">
		
			<view class="order-info-line">
				<text class="order-label">姓名</text>
				<input type="text" v-model="name" placeholder="请填写姓名" placeholder-style="color:#999999;" class="order-input">
			</view>
			<view class="order-info-line">
				<text class="order-label">联系方式</text>
				<input type="text" v-model="phone" placeholder="请填写正确联系方式" placeholder-style="color:#999999;" class="order-input">
			</view>
			<view class="order-info-line">
				<text class="order-label">身份证号</text>
				<input v-model="idcode" type="text" placeholder="请填写身份证号" placeholder-style="color:#999999;" class="order-input">
			</view>
		
			<view class="btn"   v-if="dis==1"  disabled type="button"><text>确认订单</text></view>
			<view class="btn2"  v-if="dis==2"  onmouseleave="checkInput()" oninput="changeBtnable()"><text>确认订单</text></view>
			<!-- <input class="btn2"/>
			<input class="btn"/> -->
		
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	// import validCode from '@/components/validCode.vue'
	export default {
		components: {
			uniIcon,
		},
		data() {
			return {
				name:"",
				phone:"",
				idcode:"",
				dis:1,
				navConfig:{
					comScroll:0,
					isFixed:false, //是否absolute布局
					left:{
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:true,
						text:'添加常用信息'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
			}
		},
		mounted() {
		},
		watch:{
			idcode(){
				if(this.name!= ""){
					if(this.phone.length == 11){
						if( this.idcode.length == "18" ){
							this.dis = 2
						}
					}
				}
				// console.log( this.idcode)
				
			}
		},
		methods: {
			//取值
			changeBtnable(){
			    $(".btn").removeAttr("disabled");
			},
			changeBtndisable(){
			    $(".btn").attr("disabled","true");
			},
			checkInput(){
			    var text = $(".btn2").val();
			    if(text==null||text==""){
			        changeBtndisable();
			    }
			},
		}
	}
</script>

<style>
	.order-info{
		width: 690upx;
		height: 338upx;
		border-radius: 15upx;
		background: rgba(255,255,255,1);
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-left: 28upx;
		margin-top: 182upx;
	}
	.order-info-line{
		width: 614upx;
		margin-top: 44upx;
		display: flex;
		flex-direction: row;
	}
	.order-label{
		width: 173upx;
		display: block;
		line-height: 50upx;
		font-size: 30upx;
		height: 50upx;
		padding-top: 22upx;
		margin-left: 30upx;
	}
	.order-input{
		height: 50upx;
		width: 400upx;
		font-size: 28upx;
		padding-top: 22upx;
		margin-left: 80upx;
	}
	.btn{
		width: 690upx;
		height: 88upx;
		background: #E8E8E8;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-top: 107upx;
		margin-left: 6upx;
		border-radius: 50upx;
	}
	.btn text{
		position: absolute;
		color: #FFFFFF;
		font-size: 32upx;
		font-family: PingFang SC Regular;
		margin-left: 280upx;
		margin-top: 23upx;
	}
	.btn2{
		width: 690upx;
		height: 88upx;
		background: #26B76A;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-top: 107upx;
		margin-left: 6upx;
		border-radius: 50upx;
	}
	.btn2 text{
		position: absolute;
		color: #FFFFFF;
		font-size: 32upx;
		font-family: PingFang SC Regular;
		margin-left: 280upx;
		margin-top: 23upx;
	}
</style>
